<template>
<div>
  <div class="custom-mapinfo-right-card custom-mapinfo-right-card-children">
    <div class="cardTop"></div>
    <div class="cardMid">
      <ul>
        <li @click="handleClickMenu($event, 0)">
          <div class="liWrapper">
            <span class="right-card-item-icon right-card-item-center"></span>
            <div class="right-card-item-content">
              <span class="h1 dropMenu " :class='curentIndex === 0?"active":""'>综治中心组织</span>
              <!-- <span class="p"><b>376</b>个</span> -->
              <div class="dropUl" @click.stop="handleClickStop" :style='{height: heightArr[0]+"px"}'>
                <dl ref="drop_0">
                  <dd>
                    <span class="h1">综治中心组织</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </li>
        <li @click="handleClickMenu($event, 1)">
          <div class="liWrapper">
            <span class="right-card-item-icon right-card-item-commity"></span>
            <div class="right-card-item-content">
              <span class="h1 dropMenu " :class='curentIndex === 1?"active":""'>企业</span>
              <!-- <span class="p"><b>376</b>个</span> -->
              <div class="dropUl" @click.stop="handleClickStop" :style='{height: heightArr[1]+"px"}'>
                <dl ref="drop_1">
                  <dd>
                    <span class="h1">危化企业</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">一般企业</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">规模企业</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </li>
         <li @click="handleClickMenu($event, 2)">
          <div class="liWrapper">
            <span class="right-card-item-icon right-card-item-building"></span>
            <div class="right-card-item-content">
              <span class="h1 dropMenu" :class='curentIndex === 2?"active":""'>社会组织</span>
              <div class="dropUl" @click.stop="handleClickStop" :style='{height: heightArr[2]+"px"}'>
                <dl ref="drop_2">
                  <dd>
                    <span class="h1">社会团体</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">民办非企业单位</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">基金会</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                  <dd>
                    <span class="h1">其它</span>
                    <span class="p"><b>37600</b>个</span>
                  </dd>
                </dl>
              </div>
            </div>
          </div>
        </li>
        <li @click="handleClickMenu($event, 3)">
          <div class="liWrapper">
            <span class="right-card-item-icon right-card-item-house"></span>
            <div class="right-card-item-content">
              <span class="h1 dropMenu" :class='curentIndex === 3?"active":""'>重点单位</span>
            </div>
          </div>
          <div class="dropUl dropUls" @click.stop="handleClickStop" :style='{height: heightArr[3]+"px"}'>
              <dl ref="drop_3">
                <dd>
                  <span class="h1">学校</span>
                  <span class="p"><b>37600</b>个</span>
                </dd>
                <dd>
                  <span class="h1">火车站</span>
                  <span class="p"><b>37600</b>个</span>
                </dd>
                <dd>
                  <span class="h1">医院</span>
                  <span class="p"><b>3600</b>个</span>
                </dd>
                <dd>
                  <span class="h1">汽车站</span>
                  <span class="p"><b>370</b>个</span>
                </dd>
                <dd>
                  <span class="h1">工厂</span>
                  <span class="p"><b>37600</b>个</span>
                </dd>
                <dd>
                  <span class="h1">大型商超</span>
                  <span class="p"><b>300</b>个</span>
                </dd>
              </dl>
            </div>
        </li>
      </ul>
    </div>
    <div class="cardBot"></div>
  </div>

  <div class="custom-mapinfo-bottom-card">
    <div class="scardTop">
      <div class="searchForm">
        <el-col :span="20">
          <el-input class="keyword" v-model="formData.keyWord" placeholder="请输入搜索内容"> </el-input>
        </el-col>
        <el-col :span="4">
          <el-button class="search_btn" type="primary" >&nbsp;</el-button>
        </el-col>
      </div>
    </div>
    <div class="scardBot">
      <div class="custom-seach-item">
        <ul>
          <li v-for='(item, index) in searchItem' :key="index" @click="handleSearchItem(index)">
            <p>{{item.name}}</p>
            <img :src="item.img" />
          </li>
        </ul>
        <dl class="custom-chilren-item" >
          <dd v-for="(item, index) in childrenData" :key="index" :class="curItem.indexOf(index) !== -1?'active ' + item.class:item.class" @click="handleSelectItem(index)">{{item.name}}</dd>
        </dl>
      </div>
    </div>
  </div>

</div>
</template>
<script>
import {getOrganizeData} from '@/data/applicationData'
export default {
  components: {},
  data () {
    return {
      formData: {},
      curentIndex: 0,
      OrganizeData: [],
      childrenData: [],
      heightArr: [],
      curItem: [],
      searchItem: [
        {img: require('@/assets/application/Organize/search_icon01_pressed.png'), name: '综治中心组织'},
        {img: require('@/assets/application/Organize/search_icon02_pressed.png'), name: '企业'},
        {img: require('@/assets/application/Organize/search_icon03_pressed.png'), name: '社会组织'},
        {img: require('@/assets/application/Organize/search_icon04_pressed.png'), name: '重点单位'}
      ]
    }
  },
  mounted () {
    this.OrganizeData = getOrganizeData()
    this.childrenData = this.OrganizeData[0]
    let H = this.$refs['drop_0'].offsetHeight
    this.heightArr[0] = H
  },
  computed: {},
  watch: {},
  // 方法集合
  methods: {
    handleClickMenu (el, index) {
      // el.target 是你当前点击的元素
      //  console.log(el.target) // 可修改（能够用此方法获取到他的子元素等）
      // console.log(el.currentTarget) // 不可修改（不能用此方法获取到他的子元素等）
      // el.currentTarget 是你绑定事件的元素
      if (this.curentIndex === index) {
        this.curentIndex = -1
        this.heightArr[index] = 0
      } else {
        this.curentIndex = index
        let H = this.$refs['drop_' + index].offsetHeight
        this.heightArr = [0, 0, 0, 0]
        this.heightArr[index] = H
      }
    },
    handleClickStop () {},
    handleSearchItem (index) {
      this.childrenData = this.OrganizeData[index]
      this.curItem = []
    },
    handleSelectItem (index) {
      if (this.curItem.indexOf(index) !== -1) {
        this.curItem.splice(this.curItem.indexOf(index), 1)
      } else {
        this.curItem.push(index)
      }
    }
  }
}
</script>
<style scoped>
.custom-mapinfo-right-card-children li {
  padding: 0px 28px 20px 28px;
}
.custom-mapinfo-right-card li {
  display: block;
}
.custom-seach-item ul {
  display: block
}
.liWrapper {
  display: flex
}
.custom-seach-item ul li {
  margin-right: 62px;
}
.custom-seach-item ul li:last-child {
  margin-right: 0px
}
.custom-mapinfo-right-card li span.right-card-item-center{
  background-image: url(~@/assets/application/Organize/right_icon01_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-commity{
  background-image: url(~@/assets/application/Organize/right_icon02_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-building{
  background-image: url(~@/assets/application/Organize/right_icon03_pressed.png);
}
.custom-mapinfo-right-card li span.right-card-item-house{
  background-image: url(~@/assets/application/Organize/right_icon04_pressed.png);
}
.dropMenu {
  height: 56px;
  display: flex;
  -webkit-align-items: center;
  align-items: center;
  background: url(~@/assets/application/arrow-bottom1.png) no-repeat right center
}
.dropMenu.active {
  background: url(~@/assets/application/arrow-bottom2.png) no-repeat right center
}
.dropUl {
  margin: 5px 0 0;
  transition: all .3s;
  height: 0;
  overflow: hidden;
}
.dropUl.active, .dropUls.active {
  height: auto;
  overflow: hidden;
}
.dropUl dl dd {
  margin-bottom: 10px;
}
.dropUl dl dd:last-child {
  margin-bottom: 0px;
}
.dropUls {
  margin:10px 0;
  font-size: 0
}
.dropUls dl dd {
  display: inline-block;
  width: 87px;
  margin-left: 10px
}
.dropUls span, .dropUl span {
  display: block
}
.dropUls .h1, .dropUl .h1 {
  margin-bottom: 5px;
  font-size: 16px;
  color: #fff
}
.dropUls .p b, .dropUl .p b {
  font-size: 22px;
  color: #80ddee;
  font-weight: normal
}
.dropUls .p, .dropUl .p {
  font-size: 18px;
  color: #11c0ff
}
.scardTop {
  width: 100%;
  height: 98px;
  background: url('../../assets/application/search_top_big2.png') no-repeat center center;
}
.scardBot {
  width: 100%;
  height: 198px;
  background: url('../../assets/application/search_bot_big2.png') no-repeat center center;
}
.custom-seach-item {
  padding: 8px 22px 0;
}
.custom-seach-item ul{
  margin-bottom: 20px;
}
.custom-seach-item li p {
  padding-right: 34px;
  background: url('../../assets/application/arrow-bottom2.png') no-repeat center right
}
.custom-chilren-item {
  font-size: 0;
}
.custom-chilren-item dd {
  display: inline-block;
  padding-left:38px;
  padding-top: 5px;
  padding-bottom: 5px;
  margin-right: 15px;
  font-size: 16px;
  color: #fff;
  cursor: pointer;
}
.custom-chilren-item dd.active {
  color: #80ddee
}
.custom-chilren-item dd.enterprise:nth-child(1) {
  background: url('../../assets/application/Organize/0/icon_01.png') no-repeat left center
}
.custom-chilren-item dd.enterprise:nth-child(2) {
  background: url('../../assets/application/Organize/0/icon_02.png') no-repeat left center
}
.custom-chilren-item dd.enterprise:nth-child(3) {
  background: url('../../assets/application/Organize/0/icon_03.png') no-repeat left center
}

.custom-chilren-item dd.company:nth-child(1) {
  background: url('../../assets/application/Organize/1/icon_01.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(2) {
  background: url('../../assets/application/Organize/1/icon_02.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(3) {
  background: url('../../assets/application/Organize/1/icon_03.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(4) {
  background: url('../../assets/application/Organize/1/icon_04.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(5) {
  background: url('../../assets/application/Organize/1/icon_05.png') no-repeat left center
}
.custom-chilren-item dd.company:nth-child(6) {
  background: url('../../assets/application/Organize/1/icon_06.png') no-repeat left center
}

.custom-chilren-item dd.sociology:nth-child(1) {
  background: url('../../assets/application/Organize/2/icon_01.png') no-repeat left center
}
.custom-chilren-item dd.sociology:nth-child(2) {
  background: url('../../assets/application/Organize/2/icon_02.png') no-repeat left center
}
.custom-chilren-item dd.sociology:nth-child(3) {
  background: url('../../assets/application/Organize/2/icon_03.png') no-repeat left center
}
.custom-chilren-item dd.sociology:nth-child(4) {
  background: url('../../assets/application/Organize/2/icon_04.png') no-repeat left center
}
</style>
